<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first Vue app</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<div id="app">
    {{ message }} {{ name }}
</div>

<script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        name: undefined
      },
      created () {
        this.getUserInfo()
      },
      methods: {
        getUserInfo () {
          const that = this
          $.ajax({
            type: 'GET',
            // 扩展：跨域问题
            url: 'http://localhost:8099/jdbctemplate/student/jdbc/info',
            // data to be added to query string:
            data: { 'id': 1 },
            contentType: 'application/x-www-form-urlencoded',
            // type of data we are expecting in return. 扩展：中文乱码问题
            dataType: 'json',
            timeout: 1000,
            success: function(data){
                console.log(data)
                that.name = data.first
            },
            error: function(xhr, type){
                console.log(' Ajax error!')
            }
          })
        }
      },
    })
</script>
</body>
</html>